<template>
  <div>
    <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>
    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <div class="hs-screen-row">
        <Input
          v-model="params.mobile"
          placeholder="手机号码"
          clearable
          style="width: 200px"
        />
      </div>
      <div class="hs-screen-row">
        <Input
          v-model="params.mallOrderCode"
          placeholder="订单编号"
          clearable
          style="width: 200px"
        />
      </div>
      <!-- <div class="hs-screen-row">
        <Select
          v-model="params.plantType"
          placeholder="来源"
          clearable
          style="width:200px"
        >
          <Option
            v-for="item in platformList"
            :key="item.label"
            :value="item.value"
          >
            {{ item.label }}
          </Option>
        </Select>
      </div> -->
      <div class="hs-screen-row">
        <Input
          v-model="params.poiName"
          placeholder="核销门店"
          clearable
          style="width: 200px"
        />
      </div>
      <div class="hs-screen-row">
        <Select
          v-model="params.orderState"
          placeholder="状态"
          clearable
          style="width:200px"
        >
          <!-- 1.待核销  2.已核销  3.已失效  4.已完成  10、已过期 -->
          <Option
            :value="item.value"
            v-for="item in ORDER_STATE_LIST_YCYD"
            :key="item.label"
          >
            {{ item.label }}
          </Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <DatePicker
          @on-change="changeDate"
          v-model="dateInit"
          type="daterange"
          :editable="false"
          separator=" ~ "
          split-panels
          transfer
          placeholder="创建时间"
          style="width: 200px"
        ></DatePicker>
      </div>
      <div class="hs-screen-row">
        <Button type="primary" @click="findOrderMallList">查询</Button>
      </div>
      <div class="hs-screen-row">
        <Button @click="resetSearch">重置</Button>
      </div>
    </Card>

    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <!--标题-->
      <div slot="title">
        <div class="hs-screen-box">
          <div>订单列表</div>
          <div>
            <ButtonGroup>
              <Button @click="findOrderMallList">
                <Icon type="md-refresh" size="15" />
              </Button>
            </ButtonGroup>
          </div>
        </div>
      </div>
      <div style="margin-bottom: 10px">
        <Button type="dashed" @click="addHandle">新增</Button>
      </div>
      <!--表格数据-->
      <Table
        :columns="columns"
        :data="data"
        size="small"
        :stripe="true"
        :loading="isTableLoading"
      >
        <template slot-scope="{ row }" slot="plantType">
          <!-- 1.待核销  2.已核销  3.已失效  4.已完成  10、已过期 -->
          <span v-for="item in platformList" :key="item.label">
            <span v-if="row.plantType == item.value">{{ item.label }}</span>
          </span>
        </template>
        <template slot-scope="{ row }" slot="orderState">
          <!-- 1.待核销  2.已核销  3.已失效  4.已完成  10、已过期 -->
          <span v-for="item in ORDER_STATE_LIST_YCYD" :key="item.label">
            <Tag v-if="row.orderState == item.value" :color="item.type">
              {{ item.label }}
            </Tag>
          </span>
        </template>
        <template slot="isautoverify" slot-scope="{ row }">
          <span>{{ row.isautoverify == 1 ? '是' : '否' }}</span>
        </template>

        <template slot-scope="{ row }" slot="totalFreight">
          <span>{{ row.totalFreight ? row.totalFreight : 0 }}</span>
        </template>

        <template slot-scope="{ row }" slot="balanceDeduction">
          <span>{{ row.balanceDeduction ? row.balanceDeduction : '-' }}</span>
        </template>

        <template slot-scope="{ row }" slot="payMethod">
          <span v-if="row.payMethod == 'alipay'">支付宝支付</span>
          <span v-if="row.payMethod == 'wechat'">微信支付</span>
          <span v-if="!row.payMethod">-</span>
        </template>

        <template slot-scope="{ row }" slot="payAmount">
          <span v-if="row.payAmount">{{ row.payAmount }}</span>
          <span v-else>-</span>
        </template>

        <template slot-scope="{ row }" slot="action">
          <Button
            type="success"
            size="small"
            style="margin-right: 5px"
            @click="showOrderOpe(row)"
          >
            查看
          </Button>
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="editHandle(row)"
          >
            编辑
          </Button>
        </template>
      </Table>
      <!--分页-->
      <div class="hs-page">
        <Page
          :total="total"
          show-sizer
          show-total
          transfer
          @on-change="changePage"
          @on-page-size-change="changePageSize"
        />
      </div>
    </Card>

    <!--显示模态框-->
    <StoreManualOrderOpe
      ref="storeManualOrderOpeRef"
      @confirm="findOrderMallList"
    ></StoreManualOrderOpe>
    <StoreOrderOpe ref="storeOrderOpeRef" />
  </div>
</template>

<script>
  import { platformList } from '@/constant/program';

  import hsBreadcrumb from '@/components/hs-breadcrumb';
  import StoreManualOrderOpe from './components/store-manual-order-ope.vue';
  import StoreOrderOpe from './components/store-order-ope.vue';
  import { pickBy, identity } from 'lodash';
  import moment from 'moment';
  import { ORDER_STATE_LIST_YCYD } from '@/constant/order';
  export default {
    name: 'admin',
    data() {
      return {
        ORDER_STATE_LIST_YCYD,
        platformList,
        total: 0,
        importSuccess: 0,
        importFailed: 0,
        dateInit: '',
        isTableLoading: false,
        isShowImport: false,
        // 选中数据
        selectData: [],
        action: this.$apiURL + '/orderMall/importOrderExcel',
        headers: {
          token: JSON.parse(sessionStorage.getItem('J-TOKEN')).token
        },
        // 参数
        params: {
          page: 1,
          rows: 10,
          mallOrderCode: '',
          orderState: '',
          nickName: '',
          username: '',
          consigneeName: '',
          consigneePhone: '',
          createTimeStart: '',
          createTimeEnd: '',
          mallOrderIds: '',
          isAutoVerify: '',
          mobile: '',
          poiName: ''
        },
        // 表格列
        columns: [
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '订单号',
            minWidth: 130,
            key: 'mallOrderCode'
          },
          {
            title: '联系电话',
            minWidth: 130,
            key: 'takePhone'
          },
          {
            title: '商品名称',
            minWidth: 130,
            key: 'goodsName'
          },
          {
            title: '核销门店',
            minWidth: 120,
            key: 'poiName'
          },
          {
            title: '来源',
            minWidth: 120,
            slot: 'plantType'
          },

          {
            title: '状态',
            minWidth: 120,
            slot: 'orderState'
          },
          {
            title: '创建时间',
            minWidth: 120,
            key: 'createTime'
          },
          {
            title: '操作',
            slot: 'action',
            minWidth: 200,
            align: 'center'
          }
        ],
        // 表格数据
        data: [],
        failOrderColumns: [
          {
            title: '订单编号',
            minWidth: 190,
            key: 'orderCode'
          },
          {
            title: '订单标题',
            minWidth: 280,
            key: 'orderTitle',
            ellipsis: true
          }
        ],
        failOrderData: [],
        // 面包屑
        breadcrumb: [
          { name: '首页', url: '', icon: 'ios-home-outline', size: 18 },
          { name: '门店洗衣管理', url: '', icon: '', size: 0 },
          { name: '门店运营订单', url: '', icon: '', size: 0 }
        ]
      };
    },
    created() {
      // 订单-列表查询
      this.findOrderMallList();
    },
    methods: {
      addHandle() {
        this.$refs.storeManualOrderOpeRef.show();
      },
      // 日期条件赋值
      changeDate(e) {
        this.params.createTimeStart = e[0];
        this.params.createTimeEnd = e[1];
      },
      // 订单-列表查询
      findOrderMallList() {
        this.isTableLoading = true;
        this.axios
          .post(
            '/orderMall/findXyOrderList',
            pickBy(
              { ...this.params, serviceCode: 'xy', orderModel: '3' },
              identity
            )
          )
          .then(res => {
            console.log(res);
            this.isTableLoading = false;
            if (res.status == 200) {
              this.total = res.data.total;
              this.data = res.data.rows.map(item => ({
                ...item,
                createtime: moment(item.createtime).format(
                  'YYYY-MM-DD HH:mm:ss'
                )
              }));
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '查询订单列表接口报错',
                duration: 0
              });
            }
          });
      },
      // 显示操作模态框
      showOrderOpe(row) {
        this.$refs.storeOrderOpeRef.show(row, 'view');
      },
      editHandle(row) {
        this.$refs.storeManualOrderOpeRef.show(row);
      },
      // 日期条件赋值
      changeDate(e) {
        this.params.createTimeStart = e[0];
        this.params.createTimeEnd = e[1];
      },
      // 重置筛选条件
      resetSearch() {
        this.params = {
          page: 1,
          rows: 10,
          mallOrderCode: '',
          orderState: '',
          nickName: '',
          username: '',
          consigneeName: '',
          consigneePhone: '',
          createTimeStart: '',
          createTimeEnd: '',
          mallOrderIds: '',
          isAutoVerify: '',
          mobile: '',
          poiName: ''
        };
        this.findOrderMallList();
      },
      // 改变页数
      changePage(e) {
        this.params.page = e;
        this.findOrderMallList();
      },
      // 改变页容量
      changePageSize(e) {
        this.params.rows = e;
        this.findOrderMallList();
      }
    },
    components: {
      hsBreadcrumb,
      StoreManualOrderOpe,
      StoreOrderOpe
    }
  };
</script>

<style scoped lang="less">
  .hs-upload-image-box {
    width: 485px;
    display: flex;
    align-items: center;
    justify-content: center;

    .hs-upload-add {
      cursor: pointer;
      width: 100%;
      height: 43px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dashed #cccccc;
      transition: all 0.3s;

      &:hover {
        color: #2d8cf0;
        border: 1px dashed #2d8cf0;
      }
    }
  }

  .z-import-message {
    margin: 10px 0;
  }
</style>
